@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    *,
    ::after,
    ::before {
        @apply border-border;

        box-sizing: border-box;
        border-style: solid;
        border-width: 0;
    }

    html {
        @apply text-foreground bg-background font-sans text-[100%];

        font-variation-settings: normal;
        line-height: 1.15;
        text-size-adjust: 100%;
        font-synthesis-weight: none;
        scroll-behavior: smooth;
        text-rendering: optimizelegibility;
        -webkit-tap-highlight-color: transparent;

        /* -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; */
    }

    #app,
    body,
    html {
        @apply size-full;

        /* scrollbar-gutter: stable; */
    }

    body {
        min-height: 100vh;

        /* pointer-events: auto !important; */

        /* overflow: overlay; */

        /* -webkit-font-smoothing: antialiased; */

        /* -moz-osx-font-smoothing: grayscale; */
    }

    a,
    a:active,
    a:hover,
    a:link,
    a:visited {
        @apply no-underline;
    }

    ::view-transition-new(root),
    ::view-transition-old(root) {
        @apply animate-none mix-blend-normal;
    }

    ::view-transition-old(root) {
        @apply z-[1];
    }

    ::view-transition-new(root) {
        @apply z-[2147483646];
    }

    html.dark::view-transition-old(root) {
        @apply z-[2147483646];
    }

    html.dark::view-transition-new(root) {
        @apply z-[1];
    }

    input::placeholder,
    textarea::placeholder {
        @apply opacity-100;
    }

    /* input:-webkit-autofill {
      @apply border-none;

      box-shadow: 0 0 0 1000px transparent inset;
    } */
    input[type='number']::-webkit-inner-spin-button,
    input[type='number']::-webkit-outer-spin-button {
        @apply m-0 appearance-none;
    }

    /* 只有非mac下才进行调整，mac下使用默认滚动条 */
    html:not([data-platform='macOs']) {
        ::-webkit-scrollbar {
            @apply h-[10px] w-[10px];
        }

        ::-webkit-scrollbar-thumb {
            @apply bg-border rounded-sm border-none;
        }

        ::-webkit-scrollbar-track {
            @apply rounded-sm border-none bg-transparent shadow-none;
        }

        ::-webkit-scrollbar-button {
            @apply hidden;
        }
    }
}

@layer components {
    .flex-center {
        @apply flex items-center justify-center;
    }

    .flex-col-center {
        @apply flex flex-col items-center justify-center;
    }

    .outline-box {
        @apply outline-border relative cursor-pointer rounded-md p-1 outline outline-1;
    }

    .outline-box::after {
        @apply absolute left-1/2 top-1/2 z-20 h-0 w-[1px] rounded-sm opacity-0 outline outline-2 outline-transparent transition-all duration-300 content-[""];
    }

    .outline-box.outline-box-active {
        @apply outline-primary outline outline-2;
    }

    .outline-box.outline-box-active::after {
        display: none;
    }

    .outline-box:not(.outline-box-active):hover::after {
        @apply outline-primary left-0 top-0 h-full w-full p-1 opacity-100;
    }

    .jcx-link {
        @apply text-primary hover:text-primary-hover active:text-primary-active cursor-pointer;
    }

    .card-box {
        @apply bg-card text-card-foreground border-border rounded-xl border;
    }
}

html.invert-mode {
    @apply invert;
}

html.grayscale-mode {
    @apply grayscale;
}
